<!DOCTYPE html>
<html>
<head>
    <title>Globalization</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <script src="../content/web/globalization/cultures/kendo.culture.en-US.js"></script>
        <script src="../content/web/globalization/cultures/kendo.culture.en-GB.js"></script>
        <script src="../content/web/globalization/cultures/kendo.culture.de-DE.js"></script>
        <script src="../content/web/globalization/cultures/kendo.culture.fr-FR.js"></script>
        <script src="../content/web/globalization/cultures/kendo.culture.bg-BG.js"></script>

        <div id="example">
            <div id="product-view" class="k-header">
                <div class="right">
                    <label for="culture">Choose culture:</label>
                    <input id="culture" value="en-US" />
                </div>

                <h2>Product promotion</h2>
                <ul id="fieldlist">
                    <li>
                        <label for="initial">Initial price:</label>
                        <input id="initial" value="1234.56" />
                        </li>
                    </ul>
                </div>

                <style scoped>
                    #example h2 {
                        padding: 5px 0;
                        font-weight: normal;
                        border-bottom: 1px solid #999;
                    }
                    #product-view {
                        border-radius: 10px 10px 10px 10px;
                        border-style: solid;
                        border-width: 1px;
                        overflow: hidden;
                        width: 500px;
                        padding: 20px 20px 0 20px;
                        margin: 30px auto;
                        background-position: 0 -255px;
                    }

                    .right
                    {
                        float:right;
                    }

                    #fieldlist
                    {
                        width: 100%;
                        float:left;
                        margin:0;
                        padding: 20px 0 20px 0;
                    }

                    #fieldlist li
                    {
                        list-style:none;
                        padding:5px 0;
                    }
                    #fieldlist label {
                        display: inline-block;
                        text-align: right;
                        margin-right: 5px;
                    }

            </style>

            <script>
                $(document).ready(function() {
                    var initial = new kendo.ui.MaskedTextBox($("#initial"), {
                        mask: "9,999.99 $"
                    });

                    function changeCulture() {
                        kendo.culture(this.value());

                        initial.setOptions(initial.options);
                    }

                    $("#culture").kendoDropDownList({
                        change: changeCulture,
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            {text: "de-DE"},
                            {text: "en-US"},
                            {text: "en-GB"},
                            {text: "fr-FR"},
                            {text: "bg-BG"}
                        ]
                    });
                });
            </script>
        </div>


    
    
</body>
</html>
